<template>
  <div class="wraper-box ">
    <MHeader>
      <slot>登录</slot>
    </MHeader>
    <div class="user-login"></div>
    <cube-form :model="model" @submit="submitHandler">
      <cube-form-item :field="fields[0]"></cube-form-item>
      <cube-form-item :field="fields[1]"></cube-form-item>
      <cube-form-item :field="fields[2]"></cube-form-item>
      <cube-form-item>
        <cube-button :light="true" @click="register">注册</cube-button>
      </cube-form-item>
    </cube-form>
  </div>
</template>

<script>
import MHeader from "@/components/MHeader";
import { createNamespacedHelpers } from "vuex";
let {mapActions} = createNamespacedHelpers('account');
import * as types from '../store/types'
export default {
  components: {
    MHeader
  },
  data() {
    return {
      validity: {},
      valid: undefined,
      model: {
        email: "",
        password: ""
      },
      fields: [
        {
          type: "input",
          label: "邮箱",
          props: {
            placeholder: "请输入邮箱"
          },
          rules: {
            required: true,
            type:'email'
          },
          modelKey: "email"
        },
        {
          type: "input",
          label: "密码",
          props: {
            placeholder: "请输入密码",
            type: "password"
          },
          rules: {
            required: true,
            max:10,
            min:6
          },
          modelKey: "password"
        },
        {
          type: "submit",
          label: "登陆",
          props: {
            primary: true
          }
        },
        {}
      ]
    };
  },
  methods: {
    ...mapActions([types.TO_LOGIN]),
    submitHandler(e, model) {
      e.preventDefault();
      //登陆action
      this[types.TO_LOGIN](model).then(res => {
        //登陆成功提示
        const toast = this.$createToast({
          type: "txt",
          time: 1000,
          txt: "登陆成功",
          // 设置回掉事件  设置会造成 Toast 无法显示
          onTimeout: () => {
            this.$router.push("/");
          }
        });
        toast.show();
      },err=>{
       const toast = this.$createToast({
          type: "txt",
          time: 1000,
          txt: "登陆错误",
          // 设置回掉事件  设置会造成 Toast 无法显示
        });
        toast.show(); 
      });
    },
    validateHandler(result) {
      this.validity = result.validity;
      this.valid = result.valid;
    },
    register() {
      this.$router.replace("/regiester");
    }
  }
};
</script>
<style lang="stylus">
.user-login 
  width: 62px;
  height: 62px;
  background: url("../public/images/login_bg1.png") center center no-repeat;
  background-size: cover;
  margin: 0.94rem auto 0 auto;

</style>